<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <style>
    /* 加载动画 使用loading #IS_LOADING[IS_LOADING="REFRESH_LOAD"]、> 避免样式影响到其它元素 */
    #IS_LOADING[IS_LOADING="REFRESH_LOAD"] {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #3271ae;
      opacity: 0;
      transition: opacity .5s;
    }

    @keyframes IS_LOADING_ROTATE {
      0% {
        transform: rotateZ(0deg);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }

    #IS_LOADING[IS_LOADING="REFRESH_LOAD"]>.IS_LOADING_BOX {
      width: 300px;
      height: 200px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #IS_LOADING[IS_LOADING="REFRESH_LOAD"]>.IS_LOADING_BOX>.text_box {
      position: absolute;
      margin: 0;
      bottom: 0;
      color: #fff;
      font-size: 20px;
      transform: translateY(150%);
    }

    #IS_LOADING[IS_LOADING="REFRESH_LOAD"]>.IS_LOADING_BOX>.text_box>span {
      display: inline-block;
    }

    @keyframes SPAN_JUMP {
      0% {
        transform: translateY(0px);
      }

      20% {
        transform: translateY(-20px);
      }

      40%,
      100% {
        transform: translateY(0px);
      }
    }

    #IS_LOADING[IS_LOADING="REFRESH_LOAD"]>.IS_LOADING_BOX>i {
      position: absolute;
      display: inline-block;
      border-radius: 50%;
      border-left: 3px solid white;
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      border-right: 3px solid transparent;
    }

    #IS_LOADING[IS_LOADING="REFRESH_LOAD"]>.IS_LOADING_BOX>i:nth-child(1) {
      width: 100px;
      height: 100px;
      animation: IS_LOADING_ROTATE .6s linear infinite;
    }

    #IS_LOADING[IS_LOADING="REFRESH_LOAD"]>.IS_LOADING_BOX>i:nth-child(2) {
      width: 125px;
      height: 125px;
      animation: IS_LOADING_ROTATE 0.9s linear infinite;
    }

    #IS_LOADING[IS_LOADING="REFRESH_LOAD"]>.IS_LOADING_BOX>i:nth-child(3) {
      width: 150px;
      height: 150px;
      animation: IS_LOADING_ROTATE 1.2s linear infinite;
    }
  </style>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app">
    <div id="IS_LOADING" IS_LOADING="REFRESH_LOAD">
      <div class="IS_LOADING_BOX">
        <i></i><i></i><i></i>
        <div class="text_box">
          加载中，请耐心等待......
        </div>
      </div>
    </div>
  </div>
  <script>
    const IS_LOADING = document.querySelector("#IS_LOADING[IS_LOADING='REFRESH_LOAD']")
    setTimeout(() => {
      if (IS_LOADING) { IS_LOADING.style.opacity = "1" }
    }, 200)
    const div = document.querySelector("#IS_LOADING[IS_LOADING='REFRESH_LOAD'] .IS_LOADING_BOX .text_box")
    const textList = (div?.innerText ?? '').split("")
    const fragment = document.createDocumentFragment()
    const jumpTimeMs = 1000

    textList.forEach((item, index) => {
      const i = document.createElement("span")
      i.textContent = item
      i.className = "span"
      i.style.animation = `SPAN_JUMP ${jumpTimeMs}ms ${(index) * (jumpTimeMs / textList.length)}ms linear infinite`
      fragment.appendChild(i)
    })
    div.innerHTML = ''
    div.appendChild(fragment)
  </script>
  <!-- built files will be auto injected -->
</body>

</html>